<template>
    <div ref="echarts" style="width:100%;height:100%;position: relative;"></div>
</template>
<script>
const echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/line')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        data: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        data () {
            this.setEchartsOptions()
        }
    },
    mounted () {
        this.setEchartsOptions()
    },
    methods: {
        setEchartsOptions () {
            if (this._charts === null || !this.$refs.echarts) return
            this.$nextTick(() => {
                if (typeof this._charts === 'undefined') {
                    this._charts = echarts.init(this.$refs.echarts)
                }
                if (this._charts) {
                    const xAxisData = []
                    const seriesData = []
                    this.data.forEach(item => {
                        xAxisData.push(item.name)
                        seriesData.push(item.score)
                    })
                    let options = {
                        title: {
                            left: 'center',
                            text: this.title
                        },
                        grid: {
                            left: '5%', // 设置canvas图距左的距离
                            top: '10%',
                            right: '10%',
                            bottom: '20%'
                        },
                        color: ['#1177E8'],
                        xAxis: {
                            type: 'category', // 还有其他的type，可以去官网喵两眼哦
                            data: xAxisData, // x轴数据
                            nameTextStyle: {
                                fontWeight: 600,
                                fontSize: 18
                            },
                            axisLabel: {
                                rotate: 60
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        yAxis: {
                            type: 'value',
                            max: 100,
                            min: 0,
                            splitNumber: 10,
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        series: [
                            {
                                data: seriesData,
                                type: 'line'
                            }
                        ]
                    }
                    this._charts.setOption(options)
                }
            })
        }
    },
    beforeDestroy () {
        this._charts.dispose()
        this._charts = null
    }
}
</script>
